<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>

    <style type="text/css">
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        #map {
            width: 100%;
            height: 100%;
        }

        #legend {
            position: absolute;
            left: 10px;
            bottom: 50px;
            text-align: center;
        }


    </style>
</head>
<body>

<!--
[
          {
                    "featureType": "all",
                    "elementType": "all",
                    "stylers": {}
          },
          {
                    "featureType": "administrative",
                    "elementType": "labels",
                    "stylers": {
                              "visibility": "off"
                    }
          },
          {
                    "featureType": "0801",
                    "elementType": "all",
                    "stylers": {
                              "color": "#ffffff",
                              "visibility": "off"
                    }
          },
          {
                    "featureType": "060101",
                    "elementType": "all",
                    "stylers": {
                              "visibility": "off"
                    }
          },
          {
                    "featureType": "060102",
                    "elementType": "all",
                    "stylers": {
                              "visibility": "off"
                    }
          },
          {
                    "featureType": "0802",
                    "elementType": "all",
                    "stylers": {
                              "color": "#acacac",
                              "visibility": "on"
                    }
          },
          {
                    "featureType": "water",
                    "elementType": "all",
                    "stylers": {
                              "color": "#ffffff"
                    }
          }
]
-->

    <div id="map"></div>
    <div id="legend">
        <div>高</div>
        <div id="legendValue"></div>
        <div>低</div>
    </div>
    <div id="container" style="position:absolute;left:0px;top:0;background:rgba(255,255,255,1);padding: 10px 10px 20px;">
        <div>
        <textarea type="text" style="width: 300px;height: 80px;margin-top:20px;outline: none;" id="dataInput" placeholder="需要显示的数据格式示例：广东,123;福建,123;北京,123;江苏,123">广东,123;福建,123;北京,123;江苏,123</textarea>
        </div>
        <div>
        <button onclick="show()">显示</button>
        <div>
        排序标签：
        <button onclick="showNumber()">显示</button>
        <button onclick="hideNumber()">隐藏</button>
        <br />
        文本标签：
        <button onclick="showText()">显示</button>
        <button onclick="hideText()">隐藏</button>
        </div>
        </div>
    </div>

    <script type="text/javascript" src="//cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=1XjLLEhZhQNUzd93EjU5nOGQ"></script>
    <script type="text/javascript" src="../build/mapv.js"></script>
    <script type="text/javascript" src="js/dat.gui.min.js"></script>

    <script type="text/javascript">

        // 百度地图API功能
        var map = new BMap.Map("map", {
            enableMapClick: false
        });    // 创建Map实例
        map.centerAndZoom(new BMap.Point(105.403119, 38.028658), 5);  // 初始化地图,设置中心点坐标和地图级别
        map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放

        var pt = new BMap.Point(127.733142,21.226515);
        var jiuduanwidth = 408;
        var jiuduanheight  = 563;
        var scale = 4.5;
        var myIcon = new BMap.Icon("./images/nanhai.png", new BMap.Size(jiuduanwidth / scale, jiuduanheight / scale), {
            imageSize: new BMap.Size(jiuduanwidth / scale, jiuduanheight / scale)
        });
        var marker2 = new BMap.Marker(pt,{icon:myIcon});  // 创建标注
        map.addOverlay(marker2);

        map.setMapStyle({
            styleJson: [
          {
                    "featureType": "all",
                    "elementType": "all",
                    "stylers": {
                              "visibility": "off"
                    }
          }
        ]
        });
        map.getContainer().style.background = '#fff';

        var chinaDataSet;
        var chinaLayer;
        $.get('data/china.json', function(geojson) {

            chinaDataSet = mapv.geojson.getDataSet(geojson);

            chinaLayer = new mapv.baiduMapLayer(map, chinaDataSet, options);

        });

        var data = [];
        var textData = [];
        var dataSet = new mapv.DataSet(data);
        var textSet = new mapv.DataSet(textData);

        var options = {
            draw: 'simple',
            max: 100,
            min: 0,
            size: 10,
            symbol: 'circle',
            maxSize: 50,
            zIndex: 1,
            minSize: 1,
            maxOpacity: 0.8,
            globalAlpha: 1,
            lineWidth: 1,
            gradient: { 
                0.25: "rgba(0, 0, 255, 1)",
                0.55: "rgba(0, 255, 0, 1)",
                0.85: "rgba(255, 255, 0, 1)",
                1.0: "rgba(255, 0, 0, 1)"
            },
            unit: 'px',
            fillStyle: 'rgba(255, 50, 50, 0.6)',
            strokeStyle: 'rgba(255, 255, 255, 1)',
            // shadowColor: 'rgba(55, 50, 250, 0.5)',
            // shadowBlur: 10
        }

        var pointOptions = {
            draw: 'simple',
            zIndex: 10,
            size: 10,
            fillStyle: 'rgba(255, 250, 250, 0.5)',
        }
        var mapvLayer = new mapv.baiduMapLayer(map, dataSet, pointOptions);

        var textOptions = {
            draw: 'text',
            avoid: true,
            textAlign: 'left',
            offset: {
                x: 10,
                y: 0
            },
            size: 18,
            zIndex: 2,
            fillStyle: 'black',
            shadowBlur: 5
        }

        var textLayer = new mapv.baiduMapLayer(map, textSet, textOptions);

        var textOptions = {
            draw: 'text',
            avoid: true,
            zIndex: 10,
            fillStyle: 'black',
            textKey: 'number',
        }

        var textLayer1 = new mapv.baiduMapLayer(map, textSet, textOptions);

        function finished() {
            if (!chinaLayer) {
                return;
            }

            chinaLayer.update({
                options: options 
            });
            $('#legendValue').html('');
            $('#legendValue').append(chinaLayer.getLegend({
                width: 30,
                height: 150
            }));
        };

        window.onload = function() {
            initGui();
        };

        var gradientOptions = [
            { 
                0.25: "rgba(0, 0, 255, 1)",
                0.55: "rgba(0, 255, 0, 1)",
                0.85: "rgba(255, 255, 0, 1)",
                1.0: "rgba(255, 0, 0, 1)"
            },
            {
              '0': 'Black',
              '0.5': 'Aqua',
              '1': 'White'
            },
            {
                '0.0': 'blue',
                '1': 'red'
            },
            {
                '0.0': 'rgb(0, 0, 0)',
                '0.6': 'rgb(24, 53, 103)',
                '0.75': 'rgb(46, 100, 158)',
                '0.9': 'rgb(23, 173, 203)',
                '1.0': 'rgb(0, 250, 250)'
            },
            {
                '0': 'Navy',
                '0.25': 'Blue',
                '0.5': 'Green',
                '0.75': 'Yellow',
                '1': 'Red'
            },
            {
                '0': 'Black',
                '0.33': 'DarkRed',
                '0.66': 'Yellow',
                '1': 'White'
            },
            {
                '0': 'Black',
                '0.4': 'Purple',
                '0.6': 'Red',
                '0.8': 'Yellow',
                '1': 'White'
            },
            {
                '0': 'Red',
                '0.66': 'Yellow',
                '1': 'White'
            },
            {
                '0': 'Navy', '0.25': 'Navy',
                '0.26': 'Green',
                '0.5': 'Green',
                '0.51': 'Yellow',
                '0.75': 'Yellow',
                '0.76': 'Red',
                '1': 'Red'
            },
            {
                '0.00': 'rgb(255,0,255)',
                '0.25': 'rgb(0,0,255)',
                '0.50': 'rgb(0,255,0)',
                '0.75': 'rgb(255,255,0)',
                '1.00': 'rgb(255,0,0)'
            },
            { 
                0: "yellow",
                1.0: "red"
            },
            { 
                0: "white",
                1.0: "blue"
            },
            { 
                0: "green",
                1.0: "rgb(0, 255, 255)"
            },
            { 
                0: "green",
                0.5: "yellow",
                1.0: "red"
            },
            { 
                0: "lightgreen",
                1.0: "darkgreen"
            }
        ];

        var gui;

        function initGui() {
            gui && gui.destroy();

            gui = new dat.GUI({
                nameMap: {
                    draw: '绘制方法',
                    unit: '单位',
                    size: '大小',
                    fillStyle: '颜色',
                    symbol: '形状',
                    globalAlpha: '图层透明度',
                    maxOpacity: '图层透明度',
                    // shadowColor: '阴影颜色',
                    // shadowBlur: '阴影大小',
                    gradient: '渐变色',
                    lineWidth: '线宽',
                    strokeStyle: '线颜色',
                    maxSize: '最大半径值',
                    minSize: '最小半径值',
                    max: '最大阈值',
                    min: '最小阈值',
                }
            });

            gui.add(options, 'draw', {
                '普通': 'simple', 
                '热力图': 'heatmap',
                '气泡': 'bubble',
                '颜色分类': 'category',
                '蜂窝状聚类': 'honeycomb',
                '网格聚类': 'grid',
                '值区间分类': 'choropleth',
                '颜色渐变': 'intensity'
            }).onFinishChange(function () {
                initGui();
                finished();
            });

            gui.add(options, 'unit', {
                '像素': 'px',
                '米': 'm'
            }).onFinishChange(function () {
                initGui();
                finished();
            });

            if (options.draw !== 'bubble') {

                if (options.unit == 'm') {
                    gui.add(options, 'size', 1, 200000).onFinishChange(finished);
                } else {
                    gui.add(options, 'size', 1, 100).onFinishChange(finished);
                }

            }

            if (options.draw !== 'heatmap') {
                gui.add(options, 'globalAlpha', 0, 1).onFinishChange(finished);
            }

            switch (options.draw) {
                case 'simple':
                    gui.addColor(options, 'fillStyle').onChange(finished);
                    // gui.addColor(options, 'shadowColor').onChange(finished);
                    // gui.add(options, 'shadowBlur', 1, 100).onFinishChange(finished);
                    gui.add(options, 'lineWidth', 0, 10).onFinishChange(finished);
                    gui.addColor(options, 'strokeStyle').onChange(finished);
                    gui.add(options, 'symbol', {
                        '圆形': 'circle',
                        '矩形': 'rect',
                    }).onFinishChange(finished);
                    break;
                case 'bubble':
                    gui.addColor(options, 'fillStyle').onChange(finished);
                    // gui.addColor(options, 'shadowColor').onChange(finished);
                    // gui.add(options, 'shadowBlur', 1, 100).onFinishChange(finished);
                    gui.add(options, 'lineWidth', 0, 10).onFinishChange(finished);
                    gui.addColor(options, 'strokeStyle').onChange(finished);
                    gui.add(options, 'max', 1, 500).onFinishChange(finished);
                    gui.add(options, 'maxSize', 15, 100).onFinishChange(finished);
                    gui.add(options, 'minSize', 0, 100).onFinishChange(finished);
                    break;
                case 'heatmap':
                    // gui.add(options, 'shadowBlur', 1, 100).onFinishChange(finished);
                    gui.add(options, 'max', 1, 300).onFinishChange(finished);
                    gui.add(options, 'maxOpacity', 0, 1).onFinishChange(finished);
                    break;
                case 'grid':
                case 'intensity':
                case 'honeycomb':
                    gui.add(options, 'max', 1, 50000).onFinishChange(finished);
                    gui.add(options, 'min', -100, 50000).onFinishChange(finished);
                    gui.add(options, 'lineWidth', 0, 10).onFinishChange(finished);
                    gui.addColor(options, 'strokeStyle').onChange(finished);
                    gui.addGradient(options, 'gradient', gradientOptions).onFinishChange(finished);
                    gui.add(options, 'maxSize', 0, 100).onFinishChange(finished);
                    gui.add(options, 'minSize', 0, 100).onFinishChange(finished);
                    break;
            }
            
        }

        var intensity = new mapv.utilDataRangeIntensity({
            max: 100,
            min: 0,
            maxSize: 15,
            minSize: 5
        });

        function show () {
            var dataInput = $('#dataInput').val();
            var chinaData = chinaDataSet.get();
            dataInput = dataInput.split(';');
            data = [];
            textData = [];
            var max = 0;
            var min = 15;
            for (var i = 0; i < dataInput.length; i++) {
                var line = dataInput[i].split(',');
                if (line[1] > max) {
                    max = line[1]
                }

                if (min == undefined) {
                    min = parseFloat(line[1]);
                } 

                if (line[1] < min) {
                    min = parseFloat(line[1]);
                }
            }
            intensity.setMax(max);
            intensity.setMin(min);
            options.max = max;
            options.min = min;
            var cityMapper = {};
            for ( var j = 0; j < chinaData.length; j++) {
                chinaData[j].fillStyle = 'rgba(218, 218, 218, 1)';
            }
            for (var i = 0; i < dataInput.length; i++) {
                var line = dataInput[i].split(',');
                var cityKey = line[0];
                var cityCenter = mapv.utilCityCenter.getCenterByCityName(cityKey);
                if (!cityCenter) {
                    cityCenter = mapv.utilCityCenter.getCenterByCityName(cityKey.replace('市', ''));
                }

                for ( var j = 0; j < chinaData.length; j++) {
                    cityKey = cityKey.replace(/市|省/, '');
                    if (chinaData[j].name == cityKey) {
                        chinaData[j].fillStyle = undefined;
                        chinaData[j].count = parseFloat(line[1]);
                    }
                }

                var item = {
                    geometry: {
                        type: 'Point',
                        coordinates: [cityCenter.lng, cityCenter.lat]
                    },
                    text: line[0],
                    number: (i + 1),
                    fillStyle: line[2]
                }
                if (line[1]) {
                    //item.size = intensity.getSize(line[1]);
                    item.count = parseFloat(line[1]);
                }
                data.push(item);
                if (line[3] !== 'nolabel') {
                    textData.push(item);
                }
            }
            dataSet.set(data);
            chinaDataSet.set(chinaData);
            textSet.set(textData);
            finished();
        }

        function showText() {
            textLayer.show();
        }

        function hideText() {
            textLayer.hide();
        }

        function showNumber() {
            textLayer1.show();
            mapvLayer.show();
        }

        function hideNumber() {
            textLayer1.hide();
            mapvLayer.hide();
        }


    </script>
	
</body>
</html>
